<template>
	<view class="container">
		<view class="bind-block" style="margin-top:20rpx;">
			<input class="bind-block-input" v-model="mobile" placeholder-class="bind-block-input-placeholder" placeholder="请输入手机号" />
			<view class="bind-block-btn" @tap.stop="sendSmsHandle">{{ textOfSending }}</view>
		</view>
		<view class="bind-block" style="margin-top:1rpx;"><input v-model="verify" placeholder-class="bind-block-input-placeholder" class="bind-block-input" placeholder="请输入验证码" /></view>
		<view class="bind-btn" @tap.stop="loginHandle">绑定</view>
		<u-verification-code :keep-running="true" unique-key="bindAccount" :seconds="seconds" change-text="X秒后获取" end-text="重新获取验证码" start-text="获取验证码" ref="sendCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
import Service from '@/utils/Service.js';
import { updateUserToken,updateRefereeCode } from '@/store/dispatches.js';
import { initIMService } from '@/store/dispatches.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			seconds: 60,
			options: {},
			timerToSend: null,
			textOfSending: '',
			mobile: '',
			verify: ''
		};
	},
	onLoad(options) {
		this.options = options;
	},
	computed: {
		...mapGetters({
			refereeCode: 'getRefereeCode'
		})
	},
	methods: {
		codeChange(text) {
			this.textOfSending = text;
		},
		sendSmsHandle() {
			if (this.$refs.sendCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				});
				this.$u.api
					.sendSmsCode(this.mobile, 'login')
					.then(res => {
						// 通知验证码组件内部开始倒计时
						this.$refs.sendCode.start();
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
					})
					.catch(e => {
						console.log(e);
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: e.data.msg
						});
					});
			}
			// if (this.timeOfSending >= 60 && this.canSend) {
			// 	this.canSend = false;
			// 	this.$http.post(
			// 		this.$api.url.sendIdentifySms,
			// 		{ mobile: this.mobile },
			// 		{},
			// 		res => {
			// 			this.verifyId = res.data.key;
			// 			this.timerToSend = setInterval(() => {
			// 				this.timeOfSending = this.timeOfSending - 1;
			// 			}, 1000);
			// 		},
			// 		e => {
			// 			this.canSend = true;
			// 		}
			// 	);
			// }
		},
		loginHandle() {
			uni.showLoading({
				title: '绑定中...'
			});
			this.$u.api
				.loginBySms(this.mobile, this.verify, this.options.auth_id, this.refereeCode)
				.then(res => {
					updateRefereeCode('');
					updateUserToken(res.data.token);
					initIMService();
					this.refreshUserInfo();
				})
				.catch(e => {
					if (e.statusCode == 200) {
						this.$u.toast(e.data.msg);
					}
				});
		},
		completeUserInfo() {
			this.reLaunch();
		}
	}
};
</script>

<style lang="scss">
.bind-block {
	height: 96rpx;
	padding: 0 32rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	.bind-block-input {
		height: 80rpx;
		flex: 1;
		font-size: 34rpx;
	}
	.bind-block-input-placeholder {
		color: rgba(204, 204, 204, 1);
	}
	.bind-block-btn {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
}
.bind-btn {
	width: 686rpx;
	height: 94rpx;
	background: $theme-main-color;
	border-radius: 4rpx;
	margin: 56rpx auto 0;
	font-size: 36rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 94rpx;
	text-align: center;
}
</style>
